<template>
    <!-- 分页组件 -->
    <section class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.current" :page-sizes="[10,20,30,50]" :page-size="query.limit" layout="total, sizes, prev, pager, next, jumper" :total="query.total">
        </el-pagination>
    </section>
</template>
<script>
export default {
    name: 'pagination',
    props: {
        query: Object
    },
    methods: {
        handleSizeChange(val) {
            this.query.limit = val
            this.initList()
        },
        handleCurrentChange(val) {
            this.query.current = val;
            this.query.start = (val - 1) * this.query.limit
            this.initList()
        },
        initList() {
            this.$emit('initList');
        }
    }
}
</script>
